<template>
  <div class="information">
    <van-nav-bar
      :title="$t('person.information')"
      left-arrow
      @click-left="onClickLeft1"
    />
    <van-cell-group>
      <van-cell
        v-for="(item, index) of list"
        :key="'item' + index"
        @click="onjump(item)"
      >
        <template #title>
          <span class="custom-title">{{ item.label }}</span>
          <img
            v-if="item.icon && data[item.value]"
            src="@/assets/images/person/bind.png"
            alt=""
            class="custom-img"
          />
          <img
            v-if="item.icon && !data[item.value]"
            src="@/assets/images/person/unbind.png"
            alt=""
            class="custom-img"
          />
        </template>
        <template #value>
          <span v-if="item.num == 2 || item.num == 4">{{
            point.numberTel(data[item.value] || 0, 2)
          }}</span>
          <span v-else-if="item.num == 3" class="custom-value">{{
            point.numberEmail(data[item.value])
          }}</span>
          <span v-else class="custom-value">{{
            data[item.value] || item.msg
          }}</span>

          <img
            src="@/assets/images/person/next.png"
            alt=""
            class="custom-next"
          />
        </template>
      </van-cell>
    </van-cell-group>
    <van-popup :show="birthday" position="bottom">
      <template #default>
        <div>
          <van-datetime-picker
            :loading="subLoading"
            v-model="date.currentDate"
            type="date"
            :min-date="date.minDate"
            :max-date="date.maxDate"
            @confirm="subSubmit"
            @cancel="oncancle"
          />
        </div>
      </template>
    </van-popup>
    <van-popup :show="gendershow" position="bottom">
      <template #default>
        <div>
          <van-picker
            :columns="gender"
            :loading="sexLoading"
            @confirm="onGenderConfirm"
            @cancel="onGenderCancel"
          />
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
import { updateUserInfo } from "@/api/user";
import { useI18n } from "vue-i18n";
import { Toast } from "vant";
import dayjs from "dayjs";
import { onMounted } from "vue";
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();
const router = useRouter();
const { t } = useI18n();
let subLoading = ref(false);
let sexLoading = ref(false);
const data = reactive({
  nickName: "",
  sex: "",
  phonenumber: "",
  password: "",
  birthday: "",
  email: "",
  whatsapp: "",
});
const gendershow = ref(false);
const gender = reactive([
  { text: t("person.sexNone"), value: "2" },
  { text: t("person.sexMan"), value: "0" },
  { text: t("person.sexGirl"), value: "1" },
]);
const date = reactive({
  minDate: new Date(1920, 0, 1),
  maxDate: new Date(2040, 0, 1),
  currentDate: new Date(),
});
const birthday = ref(false);
const list = reactive([
  {
    label: t("person.nickname"),
    value: "nickName",
    icon: false,
    msg: "",
    path: "/name",
    num: 1,
    msg: t("person.noName"),
  },
  {
    label: t("person.tel"),
    value: "phonenumber",
    icon: true,
    msg: t("person.unbind"),
    path: "/bindtel",
    num: 2,
  },
  {
    label: t("person.email"),
    value: "email",
    icon: true,
    msg: t("person.unbind"),
    path: "/bindemail",
    num: 3,
  },
  {
    label: t("person.whatsappid"),
    value: "whatsapp",
    icon: false,
    msg: "",
    path: "/whatsapp",
    num: 4,
  },
  {
    label: t("person.birthday"),
    value: "birthday",
    icon: false,
    msg: t("person.birthdaymsg"),
    path: "/help",
    num: 5,
  },
  {
    label: t("person.sex"),
    value: "sex",
    icon: false,
    msg: t("person.sexmsg"),
    path: "/help",
    num: 6,
  },
  {
    label: t("person.password"),
    value: "",
    icon: false,
    msg: "",
    path: "/loginpassword",
    num: 7,
  },
  {
    label: t("person.onpassword"),
    value: "",
    icon: false,
    msg: "",
    path: "/paypassword",
    num: 8,
  },
]);
onMounted(() => {
  // data=JSON.parse(localStorage.getItem('user'))
  getData();
});
async function getData() {
  let user = JSON.parse(localStorage.getItem("user"));
  console.log("获取数据", user);

  Object.assign(data, user);
  data.sex = filtSex(user.sex);
  console.log(data.sex);
}
function filtSex(val) {
  console.log("这个是数字啊啊 啊", val);
  switch (Number(val)) {
    case 2:
      return t("person.sexNone");
      break;
    case 0:
      return t("person.sexMan");
      break;
    case 1:
      return t("person.sexGirl");
      break;
    default:
      return "";
  }
}
function onClickLeft1() {
  router.push({
    path: "/personal",
  });
}
function onjump(item) {
  if (item.num == 5) {
    birthday.value = true;
  } else if (item.num == 6) {
    gendershow.value = true;
  } else if (item.num == 3 || item.num == 2 || item.num == 4) {
    return false;
  } else {
    router.push({
      path: item.path,
    });
  }
}
function subSubmit(val) {
  console.log(val);

  updateUserInfo({
    ...point.userInfo,
    birthday: dayjs(val).format("YYYY-MM-DD hh:mm:ss"),
  })
    .then(async (res) => {
      subLoading.value = false;

      await point.updataInfo();
      Toast(t("password.successMsg"));
      getData();
    })
    .catch((err) => {
      Toast(err);
      subLoading.value = false;
    });
  birthday.value = false;
}
function oncancle() {
  birthday.value = false;
}
function onGenderConfirm(val) {
  sexLoading.value = true;
  console.log(val);
  updateUserInfo({ ...point.userInfo, sex: val.value })
    .then(async (res) => {
      sexLoading.value = false;
      await point.updataInfo();
      Toast(t("password.successMsg"));
      getData();
    })
    .catch((err) => {
      Toast(err);
      sexLoading.value = false;
    });
  gendershow.value = false;
}
function onGenderCancel(val) {
  console.log(val);
  gendershow.value = false;
}
</script>

<style lang="less" scoped>
.information {
  .van-nav-bar__title.van-ellipsis {
    font-size: 18px;
  }
  .custom-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 14px;
  }
  .custom-value {
    font-size: 14px;
    font-weight: 400;
    color: #9fa19f;
    line-height: 14px;
  }
  .custom-next {
    width: 8px;
    height: 13px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
  .custom-img {
    height: 13px;
    margin-left: 6px;
    position: relative;
    top: 2px;
  }
  :deep(.van-cell:after) {
    border-bottom: 1px solid #e6e6e6;
  }
  :deep(.van-picker__toolbar) {
    border-bottom: 1px solid #bebebe;
  }
}
</style>
